<script setup>
import { storeToRefs } from 'pinia';
import { counter, mainStore } from '../store'
const count = counter()
const main = mainStore()
//1.1 如果直接解构赋值，去使用，不能达到数据双向绑定的效果。
// 取到的数据是一次性的。
// pinia其实是把state数据做了reactive处理了。
// const {num,info} = count
// 1.2 实现解构还能达到数据双向绑定的效果
// 把解构出来的数据做ref响应式代理
const {num,info} = storeToRefs(count)

const updateAddNum = ()=>{
  // 方式一.修改store的值，最简单的方式，就是直接修改。
  // count.num++;
  // 方式二. 如果修改多个数据，建议使用$patch批量更新
  // count.$patch({
  //   num: count.num+1,
  //   info: `执行了+1操作，结果为${count.num+1}`
  // })
  // 方式三，$patch是一个函数，批量更新
  // count.$patch(state=>{
  //   state.num++,
  //   state.info = `执行了+1操作，结果为${state.num+1}`,
  //   state.arr.push(4)
  // })
  // 方式四：逻辑比较复杂时候，可以封装到actions做处理。
  // count.increment(5)
  // 方式五：不推荐，是直接覆盖
  count.$state = { num: 666, info: 'Paimon' }
}


</script>

<template>
  <p>{{count.num}}</p>
  <p>{{count.info}}</p>
  <p>{{count.arr}}</p>
  <p>{{count.count10}}</p>
  <p>{{count.count10}}</p>
  <p>{{count.count10}}</p>
  <p>{{main.userId}}</p>
  <hr/>
  <p>{{num}}</p>
  <p>{{info}}</p>
  <p>
    <button @click="updateAddNum">修改num</button>
  </p>
</template>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>
